<template>
	<view class="container">
		<!-- header -->
		<com-head :textTit="(form.id ? '编辑' : '新增') + '收货地址'" typeVal="1"></com-head>
		
		<view class="main">
			<form @submit="submit">
				<view class="groupItem">
					<view class="list">
						<view class="left">
							 <view class="tit">收货人</view>
							 <input type="text" v-model="form.realname"  placeholder="请输入" placeholder-style="color:#999999"/>
						</view>
					</view>
					<view class="list">
						<view class="left">
							 <view class="tit">手机号</view>
							 <input class="nickName" placeholder="请输入"  v-model="form.phone"></input>
						</view>
					</view>
					<view class="list " @click="showAddress = true">
						<view class="left">
							 <view class="tit">所在地</view>
							<text class="txt" :class="site == '请选择'? '':'black'">{{site}}</text>
						</view>
						<u-icon name="arrow-right" color="#000" size="28"></u-icon>
					</view>
					<view class="list">
						<view class="left">
							 <view class="tit">详细地址</view>
							 <input class="nickName" placeholder="请输入"  v-model="form.address"></input>
						</view>
					</view>
				</view>
				
				<view class="default">
					<view>设为默认收货地址</view>
					<view>
						<u-switch v-model="form.default" activeColor="#007664" size="33"></u-switch>
					</view>
				</view>
			</form> 
		</view>
		
		<view class="footer" @click="submit()">
			<view>确认保存</view> 
		</view>
		
		
		<!-- 所在地 -->
		<u-select confirm-color="#007664" v-model="showAddress" label-name="area_name" value-name="id" child-name="child" :default-value="defaultList" mode="mutil-column-auto" :list="list" @confirm="confirmAddress"></u-select>
	</view>
</template>
<script>
	export default {
		components: {
		
		},

		data() {
			return {
				form: {
					realname: '',
					phone: '',
					is_default: '',
					address: '',
					area_ids: '',
					default: false,
					id: ''
				},
				defaultList:[0,0,0],
				showAddress:false,
				list:[],
				site:'请选择'
			}
		},
		onLoad(e) {
			if (e.item && JSON.parse(e.item)) {
				this.form = JSON.parse(e.item)
				if (this.form.is_default == 1) this.form.default = true
			}
			this.treeAddress()
		},
		onShow: function() {
			
		},
		methods: {
			async submit() {
				if (this.form.area_ids === "") return this.toast('请选择所在地')
				if (this.form.realname === "") return this.toast('请输入收货人')
				if (this.form.address === "") return this.toast('请输入详细地址')
				if (this.form.phone === "") return this.toast('请输入手机号')
				
				this.form.is_default = this.form.default ? 1 : 0
				let {code,data} = await this.$u.api.setAddress(this.form);
				
				if(code){
					this.toast('保存成功')
					setTimeout(()=>{
						this.jump('/pages/mine/take/index')
					}, 500)
				}
			},
			async treeAddress(){
				let {code,data} = await this.$u.api.tree();
				if(code){
					this.list = data;
					if (this.form.id){
						let pl = []
						let names = []
						this.form.area.map(item =>{
							pl.push(item.id)
							names.push(item.area_name)
						})
						this.site = names.join('-')
						this.defaultList = pl.join(',')
					}
				}
			},
			confirmAddress(e) {
				this.defaultList = [e[0].extra,e[1].extra,e[2].extra];
				this.site = `${e[0].label}-${e[1].label}-${e[2].label}`;
				this.form.area_ids = `${e[0].value},${e[1].value},${e[2].value}`;
				// console.log(342, this.defaultList, this.site, this.form.area_ids, this.list)
			}
		},
	}
</script>
<style lang="scss" scoped>
.container{
	padding: 50rpx 30rpx;
}
.default{
	display: flex;
	padding: 28rpx 30rpx;
	background: white;
	margin-top: 24rpx;
	border-radius: 10rpx;
	view{
		flex: 1;
		color: #4D5562;
		&:last-child{
			text-align: right;
		}
	}
}
.groupItem{
	padding: 0 32rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin-top: 10rpx;
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgba(142,142,142,.14);
		padding: 35rpx 0;
		&:last-child{
			border: none;
		}
		.left{
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 28rpx;
			color: #4D5562;
			.tit{
				width: 110rpx;
				margin-right: 50rpx;
			}
			.txt{
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
}
.footer{
	width: 100%;
	height: 130rpx;
	margin-top: 100rpx;
	view{
		width: 686rpx;
		height: 82rpx;
		background: linear-gradient(135deg, #50DCC2 0%, #007664);
		border-radius: 60rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 82rpx;
		margin: 24rpx auto 0;
	}
}
.black{
	color: #333333 !important;
}
</style>